<template>
    <div>
      <div>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="用户ID">
            <el-input v-model="formSearch.uid" placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="formSearch.name" placeholder="请输入用户姓名"></el-input>
          </el-form-item>
          <el-form-item label="体温">
            <el-input v-model="formSearch.temp" placeholder="请输入体温筛选"></el-input>
          </el-form-item>
          <el-form-item label="时间筛选">
            <el-date-picker
                v-model="formSearch.create_time"
                align="right"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">查询</el-button>
            <el-button type="danger" @click="clearClick">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              sortable
              label="ID"
              width="80px">
          </el-table-column>
          <el-table-column
              prop="temp"
              sortable
              label="体温"
              width="100px">
            <template slot-scope="scope">

              <el-link v-if="scope.row.temp<37" type="success">{{scope.row.temp}}</el-link>
              <el-link v-else-if="scope.row.temp<37.5" type="warning">{{scope.row.temp}}</el-link>
              <el-link v-else type="danger">{{scope.row.temp}}</el-link>
            </template>
          </el-table-column>
          <el-table-column
              prop="hover"
              label="体温说明">
          </el-table-column>
          <el-table-column
              prop="name"
              sortable
              width="100px"
              label="姓名">
            <template slot-scope="scope" v-if="scope.row.name">
              <el-tag>{{scope.row.name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="uid"
              sortable
              label="发布者">
            <template slot-scope="scope">
              <div style="display: flex;align-items: center">
                <el-avatar :src="baseURL+scope.row.user_pic"></el-avatar>
                <span>{{scope.row.username}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="create_time"
              sortable
              label="上报时间">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope" >
              <el-button type="danger" plain @click="updateClick(scope.row)">发出警告</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
          layout="prev, pager, next"
          :page-size="10"
          :current-page="pagenum"
          @current-change="pageChange"
          :total="total">
      </el-pagination>
    </div>
</template>

<script>
import { getTmepAll} from "@/request";

export default {
  name: "temp",
  data(){
    return {
      formSearch:{
        uid:null,
        name:null,
        temp:null,
        create_time:null
      },
      pagenum:1,
      total:0,
      tableData:[],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  created() {
    this.getTmep()
  },
  methods:{
    pageChange(val){
      this.pagenum=val
      this.getTmep();
    },
    clearClick(){
      this.formSearch={
        uid:null,
        name:null,
        temp:null,
        create_time:null
      }
      this.getTmep();
    },
    searchClick(){
      this.getTmep();
    },
    async getTmep(){
      this.formSearch['pagenum']=this.pagenum;
      let data=await getTmepAll(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data.list;
      this.total=data.data.total;
    },
    updateClick(item){
      const h = this.$createElement;
      this.$notify({
        title: '发出警告',
        message: h('i', { style: 'color: teal'}, '向 【'+(item.name||item.username)+'】 发出体温过高警告成功')
      });
    }
  }
}
</script>

<style scoped>

</style>